<template>
	<div>
		<el-container>
			<el-header>
				<h4>个人信息设置</h4>
			</el-header>
		</el-container>
		<el-container>
			<el-main>
				<h3>修改头像</h3>
				<div class="text">
					<el-upload class="avatar-uploader" 
					:multipe="false" 
					:show-file-list="true" 
					:auto-upload="false" 
					:before-upload="beforeUpload"
					:file-list="fileList" 
					:on-change="handleChange" 
					action="uploadAction" 
					list-type="picture" 
					accept="image/jpg,image/jpeg">
						<h2>点击这里修改头像</h2>
					</el-upload>
				</div>
				<el-button class="bu" @click="submitImg()" type="primary">提交</el-button>
				<h3>修改密码</h3>
				<p>
					<el-input placeholder="修改密码" v-model="pwd"></el-input>
				</p>
				<h3>修改名称</h3>
				<p>
					<el-input placeholder="修改名称" v-model="form.nickname"></el-input>
				</p>
				<h3>修改联系方式</h3>
				<p>
					<el-input placeholder="修改联系方式" v-model="form.phone"></el-input>
				</p>
				<p>
					<el-button type="primary" @click="change()">修改</el-button>
				</p>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import instance from '../../../ajax/index.js'
	export default {
		name: 'Message',
		data() {
			return {
				pwd: '',
				fileList:[],
				form: {
					phone: '',
					nickname: '',
				},
				img: ''
			}
		},
		methods: {
			beforeUpload(file) {
			   },
			   handleChange(file, fileList) {
			    this.fileList = fileList
			   },
			submitImg() {
			    if(this.fileList.length!=0){
			     let formData = new FormData();
			     formData.append("img", this.fileList[0].raw);
			     var that = this;
			     instance.post("/api/fore/user/updateImg", formData,{
					 headers:{'Content-Type':'multipart/form-data'}
				 }).then((res) => {
					 // this.$router.push('/')
					 localStorage.setItem('nickname','')
					 localStorage.setItem('account','')
					 localStorage.setItem('role','')
					 localStorage.setItem('token','')
			      this.$message.success({
			       message: "上传图片成功 ,请重新登录",
			       offset: 150
			      });
			      localStorage.setItem("img", res.data.data)
			     }).catch((error) => {
			      console.log(error);
			     })
			    }else{
			     this.$message.error({
			      message: '请上传头像后再提交',
			      offset: 80
			     });
			    }
			   },
			change() {
				//修改密码
				if (this.pwd == '' || this.form.phone == '' || this.form.nickname) {
					this.$message.warning({
						message: "请填写信息",
						offset: 80
					})
				} else {
					let formdate = new FormData()
					formdate.append('pwd', this.pwd)

					instance.post('/api/fore/user/updatePwd', formdate, {
						headers: {
							'Content-Type': 'application/json'
						}
					}).then((res) => {
						this.pwd = ''
						this.$message.success({
							message: "数据更新成功",
							offset: 80
						})
					}).catch((error) => {
						console.log(error);
					})
					//修改联系方式，名称
					let formdata2 = new FormData()
					formdata2.append('nickname', this.form.nickname)
					formdata2.append('phone', this.form.phone)
					instance.post('/api/fore/user/updateInfo', formdata2, {
						headers: {
							'Content-Type': 'application/json'
						}
					}).then((res) => {
						this.form.nickname = ''
						this.form.phone = ''
					}).catch((error) => {
						console.log(error);
					})
				}

			}
		}
	}
</script>

<style scoped>
	.el-header {
		margin-top: 56px;
		font-weight: bold;
		font-size: 20px;
		line-height: 60px;
	}

	.el-input {
		width: 80%;
	}
	.avatar-uploader{
		margin-top: 10px;
		width: 180px;
		border: 1px dashed black;
		/* height: 180px; */
		line-height: 80px;
		text-align: center;
		margin-bottom: 10px;
	}
	p {
		margin-top: 10px;
	}
	h3{
		margin-top: 15px;
		background-color: #ebeef5;
		height: 50px;
		color: #888888;
		line-height: 50px;
		font-size: 20px;
		text-indent: 1em;
	}
	.el-button{
		margin-left: 10px;
	}
</style>
